import {replaceByObj,isImg} from "./x-util.js";
import {iconMap} from "./x-cube.js";
import absContainer from "./abs-container.js";

const tmplBase =`<div  data-key="cube-set-cntr" >
                      <div data-key="cube-set-body">                                     
                         <div data-key="cube-set-Y">
                             <div data-key="cube-set-Y-head">
                                <span>行</span>
                            </div>
                            <div data-key="cube-set-Y-body">                               
                            </div>                      
                         </div>
                         <div data-key="cube-set-X">
                            <div data-key="cube-set-X-head">
                                <span>列</span>
                            </div>
                            <div data-key="cube-set-X-body">                               
                            </div>                          
                         </div>   
                         <div data-key="cube-set-V">
                            <div data-key="cube-set-V-head">
                                <span>数据项</span>
                            </div>
                            <div data-key="cube-set-V-body">                               
                            </div>                      
                         </div>  
                      </div>       
                      <div data-key="cube-set-footer">
                           <button data-key="cube-set-ok">确认</button>
                           <button data-key="cube-set-close">关闭</button>
                      </div>
                                                
                 </div>`;

const tmplItem = '<div {{dataKey}} {{dataCode}} >{{html}}</div>';
const tmplImg = '<img src ="{{icon}}" {{dataKey}} {{hint}} {{class}}/>';
const tmplIcon  = '<i class="iconfont {{icon}}" {{dataKey}}  {{hint}}  {{class}}></i>';
const tmplSpan = '<span>{{title}}</span>';

export default class cubeSetPanel extends absContainer{
    vCfg;
    //注册事件 事件不要注册两次
    constructor(el){
        super(el);
        this.init();
        this.$root.on('click', '[data-key="cube-set-transpose"]', this.transpose.bind(this));
        this.$root.on('click', '[data-key="cube-set-up"]', this.upKey.bind(this));
        this.$root.on('click', '[data-key="cube-set-on"]', this.setOn.bind(this));
        this.$root.on('click', '[data-key="cube-set-close"]', this.close.bind(this));
        this.$root.on('click', '[data-key="cube-set-ok"]', this.ok.bind(this));
        this.$root.on('click', '[data-key="cube-set-V-transpose"]', this.VTranspose.bind(this));
    }

    init(){
        this.$root.html(tmplBase);
        this.$XBody =  this.$root.find('[data-key="cube-set-X-body"]');
        this.$YBody =  this.$root.find('[data-key="cube-set-Y-body"]');
        this.$VBody=this.$root.find('[data-key="cube-set-V-body"]');
    }

    renderXYItem(index,key,type){
        let titleHtml = tmplSpan.replace('{{title}}',key.title);
        let upHtml ='';
        let transposeHtml='';
        let dataCode ='data-code="'+index+'"';
        let itemClass ='';
        if(this.getShowCount(type)<2 && !(key.show==false)){
            itemClass ='class="disable"';
        }
        if(index>0){
            if(isImg(iconMap.up))
                upHtml = replaceByObj(tmplImg,
                    {icon:iconMap.up,dataKey:'data-key="cube-set-up"',hint:'title="上移"'});
            else
                upHtml = replaceByObj(tmplIcon,
                    {icon:iconMap.up,dataKey:'data-key="cube-set-up"',hint:'title="上移"'});
        }
        if(isImg(iconMap.transpose))
            transposeHtml = replaceByObj(tmplImg,
                {icon:iconMap.transpose,dataKey:'data-key="cube-set-transpose"',hint:'title="转置"'});
        else
            transposeHtml = replaceByObj(tmplIcon,
                {icon:iconMap.transpose,dataKey:'data-key="cube-set-transpose"',hint:'title="转置"'});
        if((type=='X'?this.getShowCount('X'):this.getShowCount('Y'))<2)
            transposeHtml='';

        let showHtml='';
        let icon;
        if(!(key.show==false)){
            icon = iconMap.switchOn;
        }else{
            icon = iconMap.switchOff;
        }
        if(isImg(icon))
            showHtml = tmplImg;
        else
            showHtml = tmplIcon;
        showHtml = replaceByObj(showHtml,{dataKey:'data-key="cube-set-on"',icon,class:itemClass,hint:'title="维度显示设置"'});

        return replaceByObj(tmplItem,{dataKey:type=='X'?'data-key="cube-set-X-item"':'data-key="cube-set-Y-item"',dataCode,
                    html:titleHtml+upHtml+transposeHtml+showHtml, class:''})
    }

    //数据项 只有 转置
    renderVTranspose(){
        let titleHtml = tmplSpan.replace('{{title}}','数据项');
        let transposeHtml='';

        if(isImg(iconMap.transpose))
            transposeHtml = replaceByObj(tmplImg,
                {icon:iconMap.transpose,dataKey:'data-key="cube-set-V-transpose"',hint:'title="数据项转置"'});
        else
            transposeHtml = replaceByObj(tmplIcon,
                {icon:iconMap.transpose,dataKey:'data-key="cube-set-V-transpose"',hint:'title="数据项转置"'});

        return replaceByObj(tmplItem,{dataKey:'data-key="cube-set-X-item"',dataCode:'',
            html:titleHtml+transposeHtml, class:''})
    }
    // 4 on 5 off
    getShowCount(type){
        let count = 0 ;
        let keys = type=='X'?this.vCfg.keysX:type=='Y'?this.vCfg.keysY:this.vCfg.values
        for(let k of keys){
            if(!(k.show==false))
                count += 1;
        }
        return count;
    }

    renderVItem(index,key){
        let titleHtml = tmplSpan.replace('{{title}}',key.title);
        let dataCode ='data-code="'+index+'"';
        let itemClass ='';
        if(this.getShowCount('V')<2 && !(key.show==false)){
            itemClass ='class="disable"';
        }
        let icon ;
        let showHtml='';
        if(!(key.show==false)){
            icon = iconMap.switchOn;
        }else{
            icon = iconMap.switchOff;
        }
        if(isImg(icon))
            showHtml = tmplImg;
        else
            showHtml = tmplIcon;
        showHtml = replaceByObj(showHtml,{dataKey:'data-key="cube-set-on"',icon,class:itemClass,hint:'title="数据项显示设置"'})
        return replaceByObj(tmplItem,{dataKey:'data-key="cube-set-V-item"',dataCode,html:titleHtml+showHtml})
    }

    render(){
      //x body
        let html=''
        for(let i in  this.vCfg.keysX){
            html += this.renderXYItem(i,this.vCfg.keysX[i],'X');
        }
        if(!(this.vCfg.valuesOn=='Y'))
            html += this.renderVTranspose();
        this.$XBody.html(html);
       //y body
        html=''
        for(let i  in this.vCfg.keysY){
            html+= this.renderXYItem(i,this.vCfg.keysY[i],'Y');
        }
        if(this.vCfg.valuesOn=='Y')
            html += this.renderVTranspose();
        this.$YBody.html(html);
       //z body
        html=''
        for(let i in this.vCfg.values){
            html+= this.renderVItem(i,this.vCfg.values[i]);
        }
        this.$VBody.html(html);
    }

   transpose(e){
       this.vInnerClick =true;
       let code = e.currentTarget.parentNode.getAttribute("data-code");
       let type = e.currentTarget.parentNode.getAttribute("data-key");

       switch(type){
           case 'cube-set-X-item':
               this.vCfg.keysY.push(this.vCfg.keysX[code]);
               this.vCfg.keysX.splice(code,1);
               break;
           case 'cube-set-Y-item':
               this.vCfg.keysX.push(this.vCfg.keysY[code]);
               this.vCfg.keysY.splice(code,1);
               break;
       }
       this.render();
   }

    VTranspose(e){
        this.vInnerClick =true;
        if(this.vCfg.valuesOn == 'Y')
            this.vCfg.valuesOn ='X'
        else
            this.vCfg.valuesOn ='Y';
        this.render();
    }

    upKey(e){
        this.vInnerClick =true;
        let code = e.currentTarget.parentNode.getAttribute("data-code");
        let type = e.currentTarget.parentNode.getAttribute("data-key");
        let keys;
        switch(type){
            case 'cube-set-X-item':
                keys = this.vCfg.keysX;
                break;
            case 'cube-set-Y-item':
                keys = this.vCfg.keysY;
                break;
            case 'cube-set-V-item':
                keys = this.vCfg.values;
                break;
        }
        let tmp = keys[code-1];
        keys[code-1] = keys[code];
        keys[code] =tmp;
        this.render();
    }

    setOn(e){
        if($(e.currentTarget).hasClass("disable")) return ;
        this.vInnerClick = true;
        let code = e.currentTarget.parentNode.getAttribute("data-code");
        let type = e.currentTarget.parentNode.getAttribute("data-key");
        let key;
        switch(type){
            case 'cube-set-X-item':
                key = this.vCfg.keysX[code];
                break;
            case 'cube-set-Y-item':
                key = this.vCfg.keysY[code];
                break;
            case 'cube-set-V-item':
                key = this.vCfg.values[code];
                break;
        }
        key.show =  !(key.show ==false)?false:true;
        this.render();
    }

    close(e){
        $(document).unbind(this.vClickId);
        this.$root.hide();
    }

    ok(e){
        $(document).unbind(this.vClickId);
        this.$root.hide();
        if(this.vCfg.ok)
            this.vCfg.ok(this.vCfg)
    }

   show(cfg,$parent,$target){
        this.vCfg =cfg;
        this.render();
        this.setPos($parent,$target);
        this.vInnerClick = true;
        $(document).on(this.vClickId,this.evOff.bind(this));
        this.$root.show();
    }

}